<html>

<head>
    <title>apitest</title>
    <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>

    url:http://<input id="w_url" style="width: 600px" /> method:

    <select id="w_method">
    <option selected>get</option>
    <option>post</option>
    </select>
    <br/>
    <br/>
    <table style="width: 100%">
        <tr>
            <td style="width: 50%">
                <div id="w_data">

                </div>
                <input type="button" value="添加参数" onclick="addattr('','');" /></td>
            <td>name_value 格式化：<input id="w_nv" /><input type="button" value="添加参数" onclick="framatnv();" /></td>
        </tr>
    </table>


    <br/>
    <div style="text-align:center; ">
        <input type="checkbox" id="w_save" checked/> 保存参数 <input type="button" value="测试" onclick="todo();" style="width: 200px;" />

    </div>
    <br/><br/><br/>

    <div id="w_log"></div>
    <br/><br/><br/>
    <input type="button" value="清空本地存储（慎用）" onclick="claear();" />
    <textarea name="w_attrdata" id="w_attrdata" cols="30" rows="10"></textarea>
    <input type="button" value="导出" onclick="dout();" /><input type="button" value="导入" onclick="din();" />
    <form id="w_form" target="_blank" action="" method="get"></form>

    <script>
        var attr_data = [];

        function claear() {
            if (!confirm("del ?")) return;
            localStorage.clear();
            $("#w_log").html("");
        }

        function todo() {
            var _attr = getattrdata();
            $("#w_form").attr("action", _attr.url);
            $("#w_form").attr("method", _attr.method);
            $("#w_form").html("");
            for (var i = 0; i < _attr.attr.length; i++) {
                var nam = _attr.attr[i][0];
                if (!nam) continue;
                var va = _attr.attr[i][1];
                if (!($("#" + nam).attr("name"))) {
                    $("#w_form").append("<input type='hidden' id='" + nam + "' name='" + nam + "' />");
                }
                $("#" + nam).val(va);
            }

            if ($("#w_save").prop("checked")) {
                save();
                attr_init();
            }
            $("#w_form").submit();


        }

        function getattrdata() {
            var _url = $("#w_url").val();
            if (!_url.startWith("http")) {
                _url = "http://" + _url;
            }
            var attr = {
                url: _url,
                method: $("#w_method").val(),
                attr: []
            };
            $("#w_data").children().each(function(i, n) {
                var inps = $(n).find("input");
                var nam = $(inps[0]).val();
                if (!nam) return;
                var va = $(inps[1]).val();
                attr.attr.push([nam, va]);
            });

            return attr;
        }

        function setattrdata(i) {
            var atdata = attr_data[i];

            $("#w_url").val(atdata.url);
            $("#w_method").val(atdata.method);
            $("#w_data").html("");
            for (var i = 0; i < atdata.attr.length; i++) {
                var nam = atdata.attr[i][0];
                if (!nam) continue;
                var va = atdata.attr[i][1];
                addattr(nam, va);
            }
        }

        function save() {

            var _attr = getattrdata();
            if (!attr_data) attr_data = [];
            attr_data.splice(0, 0, _attr);

            localStorage.setItem("_attrdata_", JSON.stringify(attr_data));
        }

        function attr_init() {
            var jsonstr = localStorage.getItem("_attrdata_");

            if (attr_data) {
                attr_data = JSON.parse(jsonstr);
            } else {
                attr_data = [];
            }
            $("#w_log").html("");
            for (var i = 0; i < attr_data.length; i++) {
                var str = JSON.stringify(attr_data[i]);
                $("#w_log").append(" <div  ><input value='使用' type='button' onclick='setattrdata(" + i + ");' />" + str + "<input value='删除' onclick='dele(" + i + ");' type='button' /></div> ");

            }


        }

        function dele(i) {
            if (!confirm("del ?")) return;
            attr_data.splice(i, 1);
            localStorage.setItem("_attrdata_", JSON.stringify(attr_data));
            attr_init();
        }

        function addattr(n, v) {
            get_html_attr($("#w_data"), n, v);

        }


        $(function($) {

            attr_init();
        });

        function get_html_attr(ele, n, v) {

            var nid = GetRandomNum(100000, 999999);
            var vid = GetRandomNum(100000, 999999);

            var h = '    <div><input id="id' + nid + '" /> : <input id="id' + vid + '" /></div>';
            $(ele).append(h);
            $("#id" + nid).val(n);
            $("#id" + vid).val(v);

        }

        function dout() {
            $("#w_attrdata").val(JSON.stringify(attr_data));
        }

        function din() {
            attr_data = JSON.parse($("#w_attrdata").val());
            localStorage.setItem("_attrdata_", JSON.stringify(attr_data));
            attr_init();
        }

        function framatnv() {
            var nvstr = $("#w_nv").val();
            if (!nvstr) return;
            nvstr = decodeURIComponent(nvstr);
            var res = [];
            arr = nvstr.split('&');
            for (var i = 0; i < arr.length; i++) {
                var itemArr = arr[i].split('=');
                //第一个=号之前的是name 后面的全是值
                var name = itemArr.shift();
                var value = itemArr.join('=');
                addattr(name, value);

            }

        }

        function GetRandomNum(Min, Max) {
            var Range = Max - Min;
            var Rand = Math.random();
            return (Min + Math.round(Rand * Range));
        }
        String.prototype.startWith = function(str) {
            var reg = new RegExp("^" + str);
            return reg.test(this);
        }

        String.prototype.endWith = function(str) {
            var reg = new RegExp(str + "$");
            return reg.test(this);
        }
    </script>
</body>


</html>